{% extends 'base/base.html' %}



{% block title %}
历史记录
{% endblock %}


{% block main %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>饮食历史记录</h2>
    <a href="{% url 'main:index' %}" class="btn btn-primary">返回今日记录</a>
</div>

<!-- 筛选表单 -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-5">
                <label for="date_from" class="form-label">开始日期</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ date_from }}">
            </div>
            <div class="col-md-5">
                <label for="date_to" class="form-label">结束日期</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ date_to }}">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">筛选</button>
            </div>
        </form>
    </div>
</div>

{% if records %}
    <div class="row">
        {% for record in records %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 food-card">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">{{ record.date|date:"Y年m月d日" }}</h5>
                    <small class="text-muted">{{ record.date|date:"l" }}</small>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6>早餐</h6>
                        {% if record.breakfast %}
                            <span class="badge bg-info">{{ record.breakfast.name }}</span>
                            <small class="text-muted d-block">{{ record.breakfast.category.name }}</small>
                        {% else %}
                            <span class="text-muted">未记录</span>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <h6>午餐</h6>
                        {% if record.lunch %}
                            <span class="badge bg-success">{{ record.lunch.name }}</span>
                            <small class="text-muted d-block">{{ record.lunch.category.name }}</small>
                        {% else %}
                            <span class="text-muted">未记录</span>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <h6>晚餐</h6>
                        {% if record.dinner %}
                            <span class="badge bg-warning text-dark">{{ record.dinner.name }}</span>
                            <small class="text-muted d-block">{{ record.dinner.category.name }}</small>
                        {% else %}
                            <span class="text-muted">未记录</span>
                        {% endif %}
                    </div>

                    {% if record.snacks.all %}
                    <div class="mb-3">
                        <h6>零食/加餐</h6>
                        {% for snack in record.snacks.all %}
                            <span class="badge bg-secondary me-1">{{ snack.name }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    {% if record.notes %}
                    <div class="mt-3">
                        <h6>备注</h6>
                        <p class="card-text">{{ record.notes }}</p>
                    </div>
                    {% endif %}
                </div>
                <div class="card-footer bg-transparent">
                    <small class="text-muted">
                        {% if record.date == today %}
                            今天
                        {% else %}
                            {{ record.date|timesince }}前
                        {% endif %}
                    </small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}">上一页</a>
            </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active">
                    <a class="page-link" href="#">{{ num }}</a>
                </li>
                {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}">{{ num }}</a>
                </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if date_from %}&date_from={{ date_from }}{% endif %}{% if date_to %}&date_to={{ date_to }}{% endif %}">下一页</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
{% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="fas fa-history fa-4x text-muted"></i>
        </div>
        <h4 class="text-muted">暂无历史记录</h4>
        <p class="text-muted">开始记录您的每日饮食，这里将显示您的历史记录。</p>
        <a href="{% url 'main:index' %}" class="btn btn-primary">开始记录今日饮食</a>
    </div>
{% endif %}
{% endblock %}


